<template>
  <a-modal okText="确定" cancelText="取消" :width="700" @ok="ok"
           @cancel="close" title="列表排序配置" v-model="visible">
    <a-row type="flex">
      <a-col :span="10">
        <select class="field-show-config-selector" v-model="leftSelected" size="10">
          <option @dblclick="addOne(item)" v-for="item in fieldList" :value="item.id">{{ item.title }}</option>
        </select>
      </a-col>
      <a-col :span="1"/>
      <a-col :span="11">
        <select class="field-show-config-selector" size="10" v-model="rightSelected">
          <option @dblclick="remove(item)" v-for="item in dataSource" :value="item.id">
            {{ getFieldName(item.fieldId) }}
            {{ item.orderByType === 'desc' ? '↓' : '↑' }}
          </option>
        </select>
      </a-col>

      <a-col :span="2" style="display: flex; align-items: center; justify-content: center">
        <div class="field-order-config-button-container">
          <div class="toRightButton">
            <span class="iconfont" @click="moveup" style="font-size: 35px">&#xebae;</span>
          </div>
          <div class="toLeftButton">
            <span class="iconfont" @click="movedown" style="font-size: 35px">&#xebb7;</span>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-modal okText="确定" cancelText="取消" :width="700" @ok="editOK"
             @cancel="() => visible1 = false" title="排序配置" v-model="visible1">
      <a-radio-group :options="options" v-model="editing.orderByType"/>
    </a-modal>
  </a-modal>
</template>
<script>
import {createProps, guid} from '@/utils';
import {createFormDefinition, getAllFields} from '@/components/hhd/design/FormDesigner/types';

export default {
  name: 'FieldOrderConfigModal',
  props: {
    includeForms: createProps(Array, () => undefined),
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      options: [
        {label: '升序', value: 'asc'},
        {label: '降序', value: 'desc'},
      ],
      editing: {
        id: undefined,
        orderByType: undefined,
        fieldId: undefined
      },
      visible: false,
      visible1: false,
      rightSelected: [],
      leftSelected: [],
      dataSource: [],
    };
  },
  methods: {
    ok() {
      this.visible = false;
      this.$emit('ok', this.dataSource);
    },
    close() {
      this.visible = false;
    },
    open(dataSource) {
      this.visible = true;
      this.dataSource = JSON.parse(JSON.stringify(dataSource || []));
    },
    addNew() {
    },
    remove(item) {
      this.dataSource = this.dataSource.filter(i => i !== item);
    },
    moveup() {
      if (!this.rightSelected || !this.rightSelected.length) return;
      let index = this.dataSource.findIndex(f => f.id === this.rightSelected);
      if (index <= 0) return;
      let temp = this.dataSource[index];
      this.dataSource[index] = this.dataSource[index - 1];
      this.dataSource[index - 1] = temp;
      this.dataSource = [...this.dataSource];
    },
    movedown() {
      if (!this.rightSelected || !this.rightSelected.length) return;
      let index = this.dataSource.findIndex(f => f.id === this.rightSelected);
      if (index >= this.dataSource.length - 1) return;
      let temp = this.dataSource[index];
      this.dataSource[index] = this.dataSource[index + 1];
      this.dataSource[index + 1] = temp;
      this.dataSource = [...this.dataSource];
    },
    getFieldName(fieldId) {
      let list = getAllFields(this.formDefinition, this.includeForms);
      let fieldConfig = list.find(item => item.id === fieldId);
      if(fieldConfig) return fieldConfig.title;
    },
    addOne(item) {
      if (this.dataSource.findIndex(o => o.fieldId === item.id) !== -1) return;
      this.editing = {
        id: guid(),
        orderByType: 'asc',
        formId: item.formId,
        fieldId: item.id,
      };
      this.visible1 = true;
    },
    editOK() {
      this.dataSource.push(this.editing);
      this.visible1 = false;
    },
  },
  computed: {
    fieldList() {
      let list = getAllFields(this.formDefinition, this.includeForms);
      list = list.filter(f => {
        let index = this.dataSource.findIndex(d => d.fieldId === f.id);
        return index === -1;
      })
      return list;
    },
  }
};
</script>
<style>
.field-order-config-button-container .toRightButton {
  margin-bottom: 50px;
}

.field-order-config-button-container .toRightButton:hover,
.field-order-config-button-container .toLeftButton:hover {
  color: #42b3e5;

}

.field-order-config-button-container .toRightButton,
.field-order-config-button-container .toLeftButton {
  color: #bdd2e2;
  user-select: none;
  font-size: 35px !important;
  cursor: pointer;
}
</style>